<template>
	<view class="home clearfix">
		<!-- <image src="/static/home/home-bg.png" class="home-bg" mode=""></image> -->
		<cu-custom bgColor="bg-transparent justify-end">
			<block slot="content"></block>
			<block slot="right">
				<text>定位</text>
				<view class=" px15 flex align-center justify-between" style="width: 90%;">
					<view class="flex align-center search-box px15" @click="pushPage('/pages/goods/search')"><image src="/static/home/seo.png" class="block15"></image><text class="f12 text-info ml10">搜索商品</text></view>
					<image src="/static/home/fenlei.png" class="block18" @click="pushPage('/pages/class/fenlei')"></image>
				</view>
			</block>
		</cu-custom>
		<view class="wp100 bg-white mt10">
			<view class="radius-10 ovh px15"><swipers :slides="swiperList" :indicator-dots="dotStyle" srcName="img" class="radius-10" :height="300"></swipers></view>
		</view>
		<!-- notice -->
		<view class="notice bg-white   flex align-center  px20 bt1 mx15">
			<image class="notice-pic mr15" src="/static/home/gg.png"></image>
			<view class="notice-box flex align-center justify-between">
				<swipers @click="pushgg" :slides="notice" srcName="title" :indicator-dots="false" :height="88" text vertical></swipers>
				<image src="/static/home/more.png" class="block18" mode=""></image>
			</view>
		</view>
		<scroll-view class="scroll-view home" scroll-y @scrolltolower="OnReachBottom">
			<view class="flex align-center bg-white mx15 mt20 flex-wrap">
				<view class="wp25 flex flex-direction align-center mt20" v-if="index<8" v-for="(item, index) in nav" :key="index" @click="pushNav(item, index)">
					<image class="block55" :src="item.img"></image>
					<text class="f12">{{ item.name }}</text>
				</view>
			</view>
			<view class="pt20 mx15 bg-white"></view>
			
			<!-- 推荐 -->
			<view class="flex align-center justify-between mx15 mt15">
				<view class="tuijian-left bg-white flex flex-direction px10" @click="pushPage('/pages/class/viplist')">
					<view class="mt20 flex align-center">
						<view class="f16 fwb ">{{homenav[0].name}}</view>
						<view class="ml10 f12 discenter vipbox">{{homenav[0].typeName}}</view>
					</view>
					<view class="mt15 text-info f12">{{homenav[0].titleDesc}}</view>
					<image :src="homenav[0].img" class="tuijian-left-pic mt15" mode=""></image>
				</view>
				<view class="tuijian-rightmid flex flex-direction align-center justify-between">
					<view class="tuijian-right bg-white flex align-center justify-between px5" @click="pushPage('/pages/class/yidoulist')">
						<view class="flex flex-direction h90 justify-start">
							<view class="f16 fwb mt5">{{homenav[1].name}}</view>
							<view class="text-info mt10 f12">{{homenav[1].titleDesc}}</view>
							<view class="f12 discenter mt10 vipbox">{{homenav[2].typeName}}</view>
						</view>
						<image :src="homenav[1].img" class="block90" mode=""></image>
					</view>
					<view class="tuijian-right bg-white flex align-center justify-between px5" @click="pushPage('/pages/class/pintuanlist')">
						<view class="flex flex-direction h70 justify-start">
							<view class="f16 fwb mt5">{{homenav[2].name}}</view>
							<view class="text-info mt5 f12">{{homenav[2].titleDesc}}</view>
							<view class="f12 discenter mt5 vipbox">{{homenav[2].typeName}}</view>
						</view>
						<image :src="homenav[2].img" class="block70" mode=""></image>
					</view>
				</view>
			</view>
			<image :src="onepic" class="guanggao" @click="pushPage('/pages/class/yiyuan')" mode=""></image>
			<view class="mt10 flex flex-direction px15">
				<view class="flex align-center justify-between" @click="pushPage('/pages/home/more?type='+'0')">
					<view class="flex align-center">
						<image src="/static/home/tuijian.png" class="tuijian-biaoqian" mode=""></image>
						<view class="fwb f18 ml5">品牌上新</view>
					</view>
					<view class="flex align-center justify-end">
						<text class="f12 text-info mr5">更多</text>
						<text class="f12 cuIcon-right"></text>
					</view>
				</view>
				<view class="flex align-center flex-wrap justify-between">
					<view class="tuijian-box flex flex-direction mt15" v-for="(item, index) in tuijianList" @click="pushPage('/pages/goods/index?id=' + item.id)" :key="index">
						<image :src="item.pic" class="tuijian-pic"></image>
						<view class="bg-white flex flex-direction px5 py10">
							<view class="f12 ellipsis2 mt5 bg-white">{{ item.name }}</view>
							<text class="text-prices mt10">￥{{ item.money }}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="mt10 flex  flex-direction px15">
				<view class="flex align-center justify-between" @click="pushPage('/pages/home/more?type='+'1')">
					<view class="flex align-center">
						<image src="/static/home/tuijian.png" class="tuijian-biaoqian" mode=""></image>
						<view class="fwb f18 ml5">爆款推荐</view>
					</view>
					<view class="flex align-center justify-end">
						<text class="f12 text-info mr5">更多</text>
						<text class="f12 cuIcon-right"></text>
					</view>
				</view>
				<view class="flex align-center flex-wrap justify-between">
					<view class="tuijian-box flex flex-direction mt15" v-for="(item, index) in hotList" @click="pushPage('/pages/goods/index?id=' + item.id)" :key="index">
						<image :src="item.pic" class="tuijian-pic"></image>
						<view class="bg-white flex flex-direction px5 py10">
							<view class="f12 ellipsis2 mt5 bg-white ">{{ item.name }}</view>
							<text class="text-prices mt10">￥{{ item.money }}</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
//import wPicker from "@/components/w-picker/w-picker.vue";
export default {
	data() {
		return {
			nav: [],
			bannerCurrent: 0,
			noticeCurrent: 0,
			notice: [],
			swiperList: [],
			dotStyle: false,
			direction: '',
			cardCur: 0,
			onepic:'',
			tuijianList: [],
			hotList: [],
			homenav:[
				{
					name:'',
					titleDesc:'',
					typeName:'',
					img:'',
				},
				{
					name:'',
					titleDesc:'',
					typeName:'',
					img:'',
				},
				{
					name:'',
					titleDesc:'',
					typeName:'',
					img:'',
				},
			]
		};
	},
	onShow() {
		// this.$t('tabbar').forEach((text, index) => {
		// 	uni.setTabBarItem({ index: index, text: text })
		// })
		this.getData()
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		...mapActions(['setStoretype', 'getUser']),
		OnReachBottom(){
			
		},
		async getData() {
			let {
				data: { lunbotu, shengtaiImgs, oneMoneyImg, gonggaos,newgoods,bkgoods,vipSt }
			} = await this.$http.post('home.index', {}, {tipConfig: { storeLoading: true, isSuccessTip: false }});
			this.swiperList = lunbotu;
			this.nav = shengtaiImgs;
			this.onepic=oneMoneyImg
			this.notice = gonggaos;
			this.tuijianList=newgoods
			this.hotList=bkgoods
			this.homenav=vipSt
			// this.shops = shop;
		},
		cardSwiper(e) {
			this.cardCur = e.detail.current;
		},
		DotStyle(e) {
			this.dotStyle = e.detail.value;
		},
		pushgg(item) {
			this.pushPage('/pages/user/article/article?id=' + item.articleId);
		},
		saoma() {
			uni.scanCode({
				success: function(res) {
					uni.navigateTo({
						url: '/pages/cart/tableorder?' + res.result
					});
				}
			});
		},
		pushNav(item, index) {
			this.pushPage('/pages/home/more?id='+item.id+'&title='+item.name+'&type='+'2')
			// this.setStoretype(index);
			// uni.switchTab({
			// 	url: '/pages/class/index'
			// });
		}
	}
};
</script>

<style lang="less">
.tuijian-biaoqian{
	width: 14rpx;
	height: 27rpx;
}
.block10 {
	width: 20rpx;
	height: 20rpx;
}
.guanggao{
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 225rpx;
	margin-top: 30rpx;
}
.home-bg {
	width: 100%;
	height: 370rpx;
	position: fixed;
	top: 0;
}
.search-box {
	width: 560rpx;
	height: 66rpx;
	border-radius: 30rpx;
	background-color: #ffffff;
}
.vipbox{
	width: 70rpx;
	height: 34rpx;
	color: #FFFFFF;
	background-color: #d73329;
}
.wp20 {
	width: 20%;
}
.block55 {
	width: 110rpx;
	height: 110rpx;
}
.swiper-img {
	width: 670rpx !important;
	height: 286rpx !important;
}
.card-swiper uni-swiper-item .swiper-item {
	width: 670rpx !important;
	height: 286rpx !important;
}
.card-swiper uni-swiper-item {
	width: 330px !important;
	left: 20px !important;
	padding: 30rpx 0px 70rpx !important;
}
.card-swiper {
	height: 360rpx !important;
}
.tuijian {
	&-left {
		width: 310rpx;
		height: 420rpx;
		&-pic{
			width: 282rpx;
			height: 230rpx;
		}
	}
	&-rightmid {
		width: 360rpx;
		height: 420rpx;
	}
	&-right {
		width: 360rpx;
		height: 200rpx;
	}
}
.notice-pic {
	width: 60rpx;
	height: 40rpx;
}
.notice-box {
	width: calc(100% - 60rpx);
}
.tuijian {
	width: 6rpx;
	height: 36rpx;
}
.tuijian-box{
	width: 320rpx;
}
.tuijian-pic {
	width: 320rpx;
	height: 320rpx;
}
.goods-box {
	width: 336rpx;
}
.goods-pic {
	width: 336rpx;
	height: 336rpx;
	border-top-left-radius: 10rpx;
	border-top-right-radius: 10rpx;
}
.wp25 {
	width: 25%;
}
.list-line {
	width: calc(100% - 60rpx);
	margin-left: 30rpx;
	height: 1rpx;
	background-color: #e8e3e3;
}
.mx15 {
	margin-left: 30rpx;
	width: calc(100% - 60rpx);
}

.scroll-view.home {
	height: calc(100vh - 90rpx - 300rpx - 100rpx - 100rpx);
}
</style>
